<template>
	<div id="home">
		<el-container>
			<el-aside width="auto">
				<el-menu
					class="el-menu-vertical-demo"
					:unique-opened="false"
					background-color="#304156"
					:router="true"
					:collapse="iscollapse"
					:default-active="defaultActive"
					text-color="#fff"
					style="border: none;"
					active-text-color="#ffd04b"
					@open="handleOpen"
					@close="handleClose"
					@select="handleSelect"
				>
					<div class="menuheader"><h3 style="color: white;">狮博士</h3></div>
					<el-submenu v-for="item in elmenus" :key="item.index" :index="item.index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-if="item.child">
							<el-menu-item v-for="citem in item.child" :key="citem.index" :index="citem.index" :route="citem.path">
							    {{ citem.title }}
							</el-menu-item>
						</template>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="padding: 0px;margin: 0px;">
					<el-row>
						<el-col :span="8">
							<div class="headitem">
								<div class="iconbtn" @click="collapseClick"><i class="el-icon-s-fold"></i></div>
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item v-for="item in items" :key="item.path">{{ item.name }}</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
						</el-col>
						<el-col :span="6"><div class="headitem"></div></el-col>
						<el-col :span="6">
							<div class="headitem"><searchbox placeholder="搜索菜单..."></searchbox></div>
						</el-col>
						<el-col :span="2">
							<div class="headitem">
								<div class="iconbtn" @click="fullScreen">
									<i v-if="!isfullscreen" class="el-icon-full-screen"></i>
									<i v-else class="el-icon-switch-button"></i>
								</div>
								<div class="iconbtn"><i class="el-icon-bell"></i></div>
							</div>
						</el-col>
						<el-col :span="2">
							<div class="headitem" style="justify-content: space-around;">
								<el-dropdown @command="handleCommand">
									<span class="el-dropdown-link">
										<div style="display: flex;justify-content: center;align-items: center;">
											<!-- <el-avatar :size="30"><img src="@/assets/user.png" /></el-avatar> -->
											<el-avatar :size="30" :src="avatar"></el-avatar>
											<i class="el-icon-arrow-down el-icon--right"></i>
										</div>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="mycenter">个人中心</el-dropdown-item>
										<el-dropdown-item command="password">密码修改</el-dropdown-item>
										<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main style="padding: 0;background-color: white;">
					<ul v-show="contextMenu.visible" :style="{ left: contextMenu.left + 'px', top: contextMenu.top + 'px' }" class="contextmenu">
						<li @click="allCloseClick">关闭所有</li>
						<li @click="otherCloseClick">关闭其他</li>
						<li @click="tabCloseClick">关闭当前</li>
					</ul>
					<el-tabs
						v-model="editabletabs_value['active-tab']"
						type="border-card"
						style="height: 100%;"
						@tab-click="tabClick"
						@tab-remove="tabRemove"
						@contextmenu.native="openContextMenu($event)"
					>
						<el-tab-pane v-for="item in editabletabs" :key="item.name" :label="item.title" :name="item.title" :closable="item.key != ''">
							<keep-alive :include="keepalivetabs"><router-view v-if="item.isshow"></router-view></keep-alive>
						</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-container>
		</el-container>
		<Account v-bind:visible.sync="accountVisable" ref="account"></Account>
		<Password v-bind:visible.sync="passwordvisable" ref="password"></Password>
	</div>
</template>

<script>
import screenfull from 'screenfull';
import searchbox from '@/components/common/searchbox.vue';
import Account from '@/views/home/Account.vue';
import Password from '@/views/home/Password.vue';
export default {
	data() {
		return {
			contextMenu: {
				left: 0,
				top: 0,
				visible: false
			},
			items: [],
			iscollapse: false,
			isfullscreen: false,
			editabletabs: this.$editabletabs,
			editabletabs_value: this.$editabletabs_value,
			defaultActive: '',
			menuTitle: '',
			elmenus: [],
			avatar: sessionStorage.getItem('avatar'),
			accountVisable:false,
			passwordvisable:false,
		};
	},
	components: {
		searchbox,Account,Password
	},
	created() {
		let tabnode = { title: '首页', path: '/index', name: '首页', isshow: true, key: '', keyPath: [] };
		this.addTabItem(tabnode);
		let body = document.querySelector('body');
		body.addEventListener('click', e => { this.contextMenu.visible = false; }, false );
		this.getmenus();
	},
	watch: {
		$route: {
			handler() {
				this.setBreadcrumb();
			},
			immediate: true
		},
		editabletabs() {}
	},
	computed: {
		keepalivetabs() {
			return this.$store.getters.keepalivetabs;
		}
	},
	mounted() {
		window.onresize = () => {};
	},
	methods: {
		async getmenus() {
			await this.$https.get('/menu/getMenuByToken', { token: sessionStorage.getItem('token') }).then(res => {
				let data = res.data.data;
				for (var i=0; i<data.length; i++) {
					data[i].index = i + "";
					data[i].title = data[i].label;
					for (var j=0; j<data[i].children.length; j++) {
						data[i].children[j].index = i + "-" + j;
						data[i].children[j].title = data[i].children[j].label;
						data[i].children[j].path = data[i].children[j].menuUrl;
					}
					data[i].child = data[i].children;
				}
				this.elmenus = data;
			});
		},
		openContextMenu(e) {
			if (e.srcElement.id) {
				e.preventDefault();
				let title = e.srcElement.id.split('-')[1];
				this.menuTitle = title;
				this.contextMenu.visible = true;
				this.contextMenu.left = e.clientX;
				this.contextMenu.top = e.clientY + 10;
			}
		},
		allCloseClick() {
			this.$editabletabs.length = 0;
			let tabnode = { title: '首页', path: '/index', name: '首页', isshow: true, key: '', keyPath: [] };
			this.addTabItem(tabnode);
			this.defaultActive = '';
		},
		otherCloseClick() {
			let selectTab = null;
			for (let i = 0; i < this.editabletabs.length; i++) {
				if (this.editabletabs[i].title === this.menuTitle) {
					selectTab = this.editabletabs[i];
				}
			}
			let tabnode = { title: '首页', path: '/index', name: '首页', isshow: true, key: '', keyPath: [] };
			this.editabletabs.length = 0;
			this.addTabItem(tabnode);
			this.addTabItem(selectTab);
		},
		tabCloseClick() {
			this.tabRemove(this.menuTitle);
			this.menuTitle = '';
		},
		collapseClick() {
			this.iscollapse = !this.iscollapse;
		},
		setBreadcrumb() {
			var arrs = [{ name: '首页', path: '/index' }];
			let matched = this.$route.matched.filter(item => item.name);
			matched.forEach(item => {
				arrs.push(item);
			});
			if (arrs[arrs.length - 1].name === '首页') {
				this.items = [{ name: '首页', path: '/index' }];
			} else {
				this.items = arrs;
			}
		},
		fullScreen() {
			if (screenfull.enabled) {
				this.$message('用户您好，您的浏览器不支持全屏，请更换浏览器！');
			} else {
				screenfull.toggle();
				this.isfullscreen = !this.isfullscreen;
			}
		},
		handleOpen(key, keyPath) {},
		handleClose(key, keyPath) {},
		handleSelect(key, keyPath) {
			this.defaultActive = key;
			let tabnode = { title: '', path: '', name: '', isshow: false, key: '', keyPath: [] };
			for (var i = 0; i < this.elmenus.length; i++) {
				if (this.elmenus[i].child) {
					for (var j = 0; j < this.elmenus[i].child.length; j++) {
						if (this.elmenus[i].child[j].index == key) {
							tabnode.title = this.elmenus[i].child[j].title;
							tabnode.name = this.elmenus[i].child[j].title;
							tabnode.path = this.elmenus[i].child[j].path;
							tabnode.key = key;
							tabnode.keyPath = keyPath;
							break;
						}
					}
				}
			}
			if (key === '') {
				tabnode = { title: '首页', path: '/index', name: '首页', isshow: true, key: '', keyPath: [] };
			}
			this.addTabItem(tabnode);
		},
		tabClick(tab) {
			let index = 0;
			for (; index < this.$editabletabs.length; ++index) {
				if (this.$editabletabs[index].title == tab.name) break;
			}
			this.handleSelect(this.$editabletabs[index].key, this.$editabletabs[index].keyPath);
		},
		tabRemove(targetname) {
			let index = 0;
			for (; index < this.$editabletabs.length; ++index) {
				if (this.$editabletabs[index].title == targetname) break;
			}
			if (this.$editabletabs_value['active-tab'] === targetname) {
				let nexttab = this.$editabletabs[index + 1] || this.$editabletabs[index - 1];
				if (nexttab) {
					this.$editabletabs.splice(index, 1);
					this.tabClick({ name: nexttab.title });
				} else {
					this.$editabletabs.splice(index, 1);
				}
			} else {
				this.$editabletabs.splice(index, 1);
			}
		},
		addTabItem(tabnode) {
			let new_keepalivetabs = this.$store.getters.keepalivetabs;
			if (!new_keepalivetabs.includes(tabnode.name, 0)) {
				new_keepalivetabs.push(tabnode.name);
			}
			this.$store.commit('SET_KEEP_ALIVE', new_keepalivetabs);
			let isexisted = false;
			this.$editabletabs.forEach(item => {
				if (item.title == tabnode.title) isexisted = item.isshow = true;
				else item.isshow = false;
			});
			if (!isexisted && tabnode.name != '') {
				tabnode.isshow = true;
				this.$editabletabs.push(tabnode);
			}
			if (tabnode.path) this.$router.push(tabnode.path);
			this.$set(this.$editabletabs_value, 'active-tab', tabnode.title);
		},
		handleCommand(command) {
			if (command == 'logout') {
				sessionStorage.removeItem('token');
				this.$editabletabs.length = 0;
				this.$editabletabs_value = { 'active-tab': '' };
				this.$router.push('/login');
			}
			if (command == 'mycenter') {
				this.accountVisable=true;
			}
			if (command == 'password') {
				this.passwordvisable=true;
			}
		},
	}
};
</script>

<style lang="less">
#home {
	display: flex;
	position: relative;
	width: 100%;
	min-height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
}
.el-menu-item {
	border-left: 5px #304156 solid;
}
.el-menu-item:hover {
	border-left: 5px #263445 solid;
}
.el-menu-item.is-active {
	color: #6681fa;
	background-color: gray !important;
	border-left: 5px #ffd04b solid;
}
.el-aside {
	background-color: #304156 !important;
	height: 100%;
}
.menuheader {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 60px;
	background-color: #3c8dbc;
}
.headitem {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	margin: 0 10px 0 0;
}
.iconbtn {
	font-size: 24px;
	display: flex;
	width: 54px;
	height: 54px;
	margin: 3px;
	position: relative;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	color: dimgrey;
}
.iconbtn:hover {
	color: deepskyblue;
	background-color: #f2f4f8;
}
.el-tabs__nav .el-tabs__item {
	background-color: white !important;
	color: gray !important;
	border: 1px solid lightgray !important;
}
.el-tabs__nav .el-tabs__item.is-active {
	background-color: #42b983 !important;
	color: white !important;
	border: 1px solid lightgray !important;
}
.contextmenu {
	width: 100px;
	border: 1px solid #F4F4F4;
	background: white;
	z-index: 3000;
	position: absolute;
	list-style-type: none;
	border-radius: 5px;
	font-size: 14px;
	color: grey;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2);
}
.contextmenu li {
	margin: 0;
	padding: 8px 16px;
}
.contextmenu li:hover {
	background: #f0f0f0;
	cursor: pointer;
}
</style>
